<template>
  <div class="product-detail-component">
    <div v-if="productFiles.length > 0">
      <el-carousel
        :initial-index="0"
        trigger="click"
        class="carousel"
        indicator-position="none"
        ref="carouselRef"
        :autoplay="false"
        :loop="false"
        arrow="never"
        @change="didTopImageChanage"
      >
        <el-carousel-item v-for="(item, index) in productFiles" :key="index">
          <img
            :src="item"
            :alt="'Product Image ' + index"
            class="product-image"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div v-else>
      <ProductEmpty :width="'600px'" :height="'600px'" />
    </div>

    <div class="thumbnails">
      <ProductThumbnailScrollCard
        ref="productThumbnailScrollCardRef"
        :product-files="productFiles"
        :currentIndex="currentIndex"
        @didThumbnailsIndexChange="didThumbnailsIndexChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, onMounted, ref } from 'vue'
import { ElCarousel, ElCarouselItem } from 'element-plus'
import ProductThumbnailScrollCard from './ProductThumbnailScrollCard.vue'
import ProductEmpty from './ProductEmpty.vue'

// 示例数据，实际开发中应该通过props传入
const props = defineProps({
  productData: {
    type: Object,
    required: true
  }
})

//数据
const productFiles = computed(() => {
  const images = props.productData.productImages || []
  props.productData.productAttributes.forEach((attribute: any) => {
    if (attribute.attrValueVOs) {
      attribute.attrValueVOs.forEach((attrValue: any) => {
        if (attrValue.skuImageUrl) {
          images.push(attrValue.skuImageUrl)
        }
      })
    }
  })
  return images
})
//顶部滑动
const carouselRef = ref(null)
const productThumbnailScrollCardRef = ref(null)
const currentIndex = ref(0)

// 处理缩略图点击事件
const didThumbnailsIndexChange = (res: any) => {
  if (carouselRef.value) {
    carouselRef.value.setActiveItem(res.val)
  }
}

const didTopImageChanage = (res: number) => {
  currentIndex.value = res
}
const resetIndicatorPosition = (imgUrl: string) => {
  currentIndex.value = productFiles.value.indexOf(imgUrl)
  didThumbnailsIndexChange({ val: currentIndex.value })
  productThumbnailScrollCardRef.value.setScrollXPosition(currentIndex.value)
}

onMounted(() => {
  carouselRef.value = carouselRef.value || null
})

defineExpose({
  resetIndicatorPosition
})
</script>

<style lang="scss" scoped>
.product-detail-component {
  width: 500px;
  height: 582px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.carousel {
  width: 500px;
  height: 500px;
}

.product-image {
  width: 500px;
  height: 500px;
  object-fit: cover;
}

.thumbnails {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 66px;
  /* gap: 10px; 设置缩略图之间的间距 */
  /* margin-top: 20px; 图和轮播图之间的间距 */
}

.infinite-list {
  width: 500px;
  height: 66px;
}

.thumbnail {
  width: 66px;
  height: 66px;
  object-fit: cover; /* 保持图片比例 */
  margin-right: 8px; /* 右侧间距 */
  box-sizing: border-box; /* 包含边距在宽高的计算之内 */
}

:deep(.el-carousel__item) {
  height: 500px !important;
}

:deep(.el-carousel__arrow) {
  top: 245px !important;
}
</style>
